<template>
  <h5>子级组件</h5>
  <h5>{{ msg }}</h5>
  <button @click="update">更新数据</button>
</template>
<script>
  import { defineComponent, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref} from 'vue';
  export default defineComponent({
    name:'ShengmZhouqi',
    // vue2.x生命周期钩子
    beforeCreate() { console.log('2.x的beforeCreate'); },
    created() { console.log('2.x的created'); },
    beforeMount() { console.log('2.x的beforeMount'); },
    mounted() { console.log('2.x的mounted'); },
    beforeUpdate() { console.log('2.x的beforeUpdate'); },
    updated() { console.log('2.x的updated'); },
    // vue2.x的beforeDestroy和destroyed,这两个生命周期回调已经改名了,不能再使用了
    beforeUnmount() { console.log('2.x的beforeUnmount'); },
    unmounted() { console.log('2.x的unmounted'); },
    // vue3.0生命周期钩子
    setup(){
      console.log('3.0的setup');
      const msg=ref('abc') //响应式的数据
      const update=()=>{  //按钮点击事件的回调
        msg.value+='==='
      }
      onBeforeMount(()=>{ console.log('3.0的onBeforeMount');})
      onMounted(()=>{ console.log('3.0的onMounted');})
      onBeforeUpdate(()=>{ console.log('3.0的onBeforeUpdate');})
      onUpdated(()=>{ console.log('3.0的onUpdated');})
      onBeforeUnmount(()=> { console.log('3.0的onBeforeUnmount');})
      onUnmounted(()=>{ console.log('3.0的onUnmounted');})
      return{
        msg,update
      }
    }
  })
</script>
<style scoped>
</style>